<template>
  <!--执行页-电话簿-增加催收总结 -->
  <section class="component add-case-tel-record">
    <el-form ref="form" :rules="rules" label-width="90px" :model="applyModel">
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收对象" prop="custType">
            <el-select placeholder="请选择" v-model="applyModel.custType">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData('CustType')"
                :key="index"
                :label="name"
                :value="code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="targetName">
            <el-input
              v-model="applyModel.targetName"
              :disabled="showInput"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话号码" prop="targetPhone">
            <el-input
              v-model="applyModel.targetPhone"
              :disabled="showInput"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行动代码:" prop="followupBack">
            <el-select v-model="applyModel.followupBack" @change="setCheckTime">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'FollowupBack'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="承诺还款日期:" prop="checkTime">
            <el-date-picker
              v-model="applyModel.checkTime"
              type="date"
              placeholder="请选择日期"
              :value-format="'yyyy-MM-dd'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承诺还款金额" prop="promiseAmt">
            <el-input
              type="number"
              v-model="applyModel.promiseAmt"
              :min="0"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="催记描述" prop="followContent">
        <el-input
          style="width:460px"
          type="textarea"
          maxlength="500"
          show-word-limit
          v-model="applyModel.followContent"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button">
      <el-button @click="close">取消</el-button>
      <el-button :loading="submitLoading" @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { State, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { MENU_CHANNEL } from "~/config/enum.config";

const CollectionExecutionModule = namespace("collection-execution");
@Component({})
export default class AddCaseTelRecord extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Prop({ required: true })
  private phoneData: any;
  @Prop({ type: Boolean }) private showInput: any;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private otherData;

  private rules: any = {
    custType: [{ required: true, message: "请输入催收对象" }],
    targetName: [{ required: true, message: "请输入姓名" }],
    followupBack: [{ required: true, message: "请选择行动代码" }],
    targetPhone: [{ required: true, message: "请输入联系电话" }]
  };
  private submitLoading: boolean = false;
  private applyModel: any = {
    remark: "",
    promiseAmt: "",
    targetPhone: "",
    targetName: "",
    custType: "",
    caseId: "",
    followupBack: "",
    checkTime: "",
    followContent: ""
  };
  @Watch("phoneData", { immediate: true })
  private phoneDataChange(value) {
    this.applyModel.targetPhone = value.phone;
    this.applyModel.targetName = value.contName;
    this.applyModel.custType = value.custType;
    this.applyModel.id = value.id;
  }
  @Emit("close")
  private close() {
    const form: any = this.$refs["form"];
    form.resetFields();
  }
  @Emit("success") private emitSuccess() {}
  private commit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;
      if (this.menuChannel === MENU_CHANNEL.Assist_tel) {
        this.applyModel.assistId = this.otherData.assistId;
      }
      this.submitLoading = true;
      this.applyModel.caseId = this.caseId;
      this.caseOperatorPageService.addCaseTelRecord(this.applyModel).subscribe(
        data => {
          this.submitLoading = false;
          this.$message.success("添加成功");
          this.close();
          this.emitSuccess();
        },
        err => {
          this.submitLoading = false;
        }
      );
    });
  }
  private setCheckTime() {
    if (!this.applyModel.followupBack) {
      this.applyModel.checkTime = "";
    }
    if (
      this.applyModel.followupBack === "PTP" ||
      this.applyModel.followupBack === "CAPT"
    ) {
      const currentTime: any = new Date();
      this.applyModel.checkTime = this.$filter.dateTimeFormat(
        new Date((currentTime / 1000 + 86400 * 3) * 1000)
      );
    } else {
      const currentTime: any = new Date();
      this.applyModel.checkTime = this.$filter.dateTimeFormat(
        new Date((currentTime / 1000 + 86400) * 1000)
      );
    }
  }
}
</script>

<style scoped lang="less"></style>
